<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
         *{margin:0;padding:0;list-style: none;text-decoration: none;}
        nav{
            width: 100%;
            height: 50px;
            background-color: #abcdef;
            font-weight: 700;
            font-size: 25px;
        }
        ul{
            width: 80%;
            margin:0 auto;
        }
        nav>ul>li{
            float:left;
            line-height:50px;
            /*padding: 0 20px;*/
        }
        ul li:hover{
            background-color: #333;
        }
        li a{
            display:block;
            height:50px ;
            line-height:50px;
            padding:0 20px;
        }
        nav a:link{color:#f00;}
        nav a:hover{color:#fff;}
        .op li{
            font-size:20px;
            height:40px;
            font-weight:300;
            display:none;  /*默认 不显示*/
        }
        .select:hover .op li{
            color:#fff;
            display:block; /*选中时 才显示*/
        }
        #gun{
            width: 400px;
            height: 50px;
            line-height: 50px;
            /*border: 1px solid #000;*/
            overflow: hidden;
            /*overflow: scroll;*/
        }
    </style>
</head>
<body>
    <h1>onscroll 事件</h1>
    <hr style="height: 150px">

    <nav id="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li class="select">
                <a href="#">电器</a>
                <ul class="op">
                    <li>电视</li>
                    <li>冰箱</li>
                    <li>空调</li>
                    <li>风扇</li>
                </ul>
            </li>
            <li><a href="#">家具</a></li>
            <li class="select"><a href="#">成人用品</a>
                <ul class="op">
                    <li>电视1</li>
                    <li>冰箱2</li>
                    <li>空调3</li>
                    <li>风扇4</li>
                </ul>
            </li>
            <li><a href="#">肾7</a></li>
        </ul>
    </nav>

    <hr>
    <br>
    <br>
    <br>
    <br>

    <div id="gun">asdfghjklqwertyuiopzxcvbnasdfghjklqwertyuiopzxcvbnasdfghjklqwertyuiopzxcvbnasdfghjklqwertyuiopzxcvbnasdfghjklqwertyuiopzxcvbnasdfghjklqwertyuiopzxcvbnasdfghjklqwertyuiopzxcvbnasdfghjklqwertyuiopzxcvbnasdfghjklqwertyuiopzxcvbnasdfghjklqwertyuiopzxcvbn</div>

    <div style="height: 3000px"></div>

    <script>
        window.onscroll = function() {
            // console.log('滚了...');
            console.log('滚动条滚了: ' +document.body.scrollTop +'px');

            if (document.body.scrollTop > 200) {
                // 置顶
                nav.style.position = 'fixed';
                nav.style.top = '0px';
            } else {
                // 还原原位置
                nav.style.position = '';
                nav.style.top = '200px';
            }
        }

        setInterval(function () {
            gun.scrollLeft += 10;
        }, 100);
    </script>
</body>
</html>